const Pager = require('../../components/aotoo/core/index')
const lib = Pager.lib

module.exports = function mkDropdown(params) {
  let dft = {
    id: lib.suid('dd-'),
    listClass: 'dropdown-tab',
    itemClass: 'dropdown-item',
    menus: [],
    contents: [],
    footer: {},       //用于存放按钮
    type: 'radio',
    mask: true,
    maskBg: 'rgba(0,0,0,0.4)',
    itemWidth: '',
    // aysncItem: false
  }

  let opts = Object.assign({}, dft, params)
  let menusData = adapter(opts)
  let contentData = maskAdapter(opts)

  opts.listClass = opts.listClass.indexOf('dropdown-tab') <= 0 ? ('dropdown-tab '+ opts.listClass) : opts.listClass
  opts.itemClass = opts.itemClass.indexOf('dropdown-item') <= 0 ? ('dropdown-item '+ opts.itemClass) : opts.itemClass

  return {
    $$id: opts.$$id || opts.id,
    data: menusData,
    listClass: opts.listClass,
    itemClass: opts.itemClass,
    listStyle: opts.itemWidth ? `--itemWidth: ${opts.itemWidth}` : 'flex: 1',
    // footer: opts.contents.length === 0 ? {...maskAdapter({}, 'ss', opts.mask, opts.maskBg)} : '',
    footer: contentData,
    header:{
      $$id: 'mask', title: '', itemClass: 'dropdown-mask disN', itemStyle: opts.mask && opts.maskBg ? `--maskBg: ${opts.maskBg}` : `--maskBg: rgba(0,0,0,0)`, aim: 'onCloseScreen'
    },
    methods: {
      onClick(e, params, inst) {
        const $pop = this.activePage.getElementsById('dropdown-pop')
        const $mask = this.activePage.getElementsById('mask')
        const that = this
        const { id, type, idx } =params
        if (type !== 'other') {
          if (!inst.hasClass('active')) {
            inst.addClass('active')
            inst.siblings().removeClass('active')
          }
          else {
            inst.removeClass('active')
          }
          if (type === 'radio' || type === 'checkbox') {
            if ($mask.hasClass('disN')) {
              $mask.removeClass('disN')
            }
            $pop.css(`--block${idx}: block`)
          }
          this.currIdx = idx
        }
        this.hooks.emit('updateContent', {id: id, type: type})
                
      },
      onCloseScreen(e, params, inst)  {
        const $pop = this.activePage.getElementsById('dropdown-pop')
        inst = inst || this.activePage.getElementsById('mask')
        $pop.css(`--block${this.currIdx}: none`)
        if (!inst.hasClass('disN')) {
          inst.addClass('disN')
        }
        const getDt = this.getData().data
        getDt.forEach(item => {
          const itemInt = this.activePage.getElementsById(item.$$id)
          itemInt.hasClass('active') && itemInt.removeClass('active')
        })
      },
      onSelfClose(e, params, inst) {
        //内部使用
        inst.parent().removeClass('active')
        inst.parent().parent().removeClass('active')
      },
      onClose(params) {
        //外部使用 
        const _vals = params.vals
        const _parentId = params.parentId
        // if (_parentId) {
        //   this.find('screen-pop-content-'+_parentId).removeClass('active')
        // }
        if (_vals) {
          this.find('screen-item-'+_parentId).removeClass('active')
          this.find('screen-item-'+_parentId).addClass('chekced')
          this.find('screen-item-'+_parentId).update({[`title.title`]: _vals})
        }
        else {
          this.find('screen-item-'+_parentId).reset()
        }
        this.onCloseScreen()
      }
    }
  }
}

const maskAdapter = (options) => {
  let dt = []
  if (options.contents) {
    dt = options.contents
  }
  dt = dt.map((item, ii) => {
    if (item) {
      return {
        '@list': item,
        itemStyle: `display: var(--block${ii}, none)`
      }
    }
  })
  return {
    $$id: 'dropdown-pop',
    dot: dt,
    itemClass: 'dropdown-pop'
  }
}

const adapter = (params) => {
  const menusData = params.menus
  const contentData = params.contents
  const mask = params.mask
  const maskBg = params.maskBg
  
  return menusData.map((item, ii) => {
    return {
      $$id: 'screen-item-'+ item.id,
      title: {
        title: item.title,
        itemClass: 'item-title textellipsis-1',
      },
      aim: 'onClick?id='+item.id + '&type='+item.type + '&idx='+ ii
    }
  })
}